<!--空白弹出页面参考模版-->
{extend name='public/layer_base' /}
{block name='content'}
<!-- 这里写内容即可 -->
<div class="row">
    <div class="col-md-12">
        <!--数据列表顶部-->
        <div class="box-header">
            <div>
                <div class="box-body">
                    <div class="col-md-12">
                        <div class="box box-primary">
                            <!-- 表单 -->
                            <form  class="form-horizontal dataForm">
                                <!-- 表单字段区域 -->
                                <div class="box-body">
                                    <div class="form-group">
                                        <label for="id_str" class="col-sm-2 control-label">选中短视频ID（按逗号拼接）</label>
                                        <div class="col-sm-10 col-md-4">
                                            <textarea readonly style="width: 600px;height: 150px;margin-right: 50px">{$id_str|default=''}</textarea>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="push_exposure_num" class="col-sm-2 control-label">曝光次数</label>
                                        <div class="col-sm-10 col-md-4">
                                            <input id="push_exposure_num" name="push_exposure_num" value="0"
                                                   placeholder="请输入曝光次数" type="number" class="form-control field-text">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="push_start_time" class="col-sm-2 control-label">推广开始时间<span style="color: red">（点击选择）</span></label>
                                        <div class="col-sm-10 col-md-4">
                                            <input id="push_start_time" readonly name="push_start_time" value="" placeholder="请选择推广开始时间" type="text" class="form-control filed-datetime">
                                        </div>
                                    </div>
                                    <script>
                                        laydate.render({
                                            elem: '#push_start_time',
                                            type: 'datetime',
                                        });
                                    </script>
                                    <div class="form-group">
                                        <label for="push_end_time" class="col-sm-2 control-label">推广结束时间<span style="color: red">（点击选择）</span></label>
                                        <div class="col-sm-10 col-md-4">
                                            <input id="push_end_time" readonly name="push_end_time" value="" placeholder="请选择推广结束时间" type="text" class="form-control filed-datetime">
                                        </div>
                                    </div>
                                    <script>
                                        laydate.render({
                                            elem: '#push_end_time',
                                            type: 'datetime',
                                        });
                                    </script>
                                    <div class="form-group">
                                        <label for="push_sex" class="col-sm-2 control-label">推送性别</label>
                                        <div class="col-sm-10 col-md-4">
                                            <select name="push_sex" id="push_sex" class="form-control field-select" data-placeholder="请选择推送性别">
                                                <option value="0">全部</option>
                                                <option value="1">男</option>
                                                <option value="2">女</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="push_minage" class="col-sm-2 control-label">推送最小年龄（0为全部）</label>
                                        <div class="col-sm-10 col-md-4">
                                            <input id="push_minage" name="push_minage" value="0"
                                                   placeholder="请输入推送最小年龄" type="number" class="form-control field-text">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="push_maxage" class="col-sm-2 control-label">推送最大年龄（0为全部）</label>
                                        <div class="col-sm-10 col-md-4">
                                            <input id="push_maxage" name="push_maxage" value="0"
                                                   placeholder="请输入推送最大年龄" type="number" class="form-control field-text">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="push_code" class="col-sm-2 control-label">推广地区（可单选省/市/区）</label>
                                        <div class="col-sm-10 col-md-4">
                                        <select style="width: 30%;display: inline;" name="rule_province" id="provinces" class="form-control input-sm index-search">  <option value="">请选择省份</option></select>
                                        <select style="width: 30%;display: inline;" name="rule_city" id="citys" class="form-control input-sm index-search"><option value="">请选择市</option></select>
                                        <select style="width: 30%;display: inline;" name="rule_qu" id="qus" class="form-control input-sm index-search"><option value="">请选择区</option></select>
                                        </div>
                                    </div>
                                    <script>
                                        $("#provinces").change(function() {
                                            $.ajax({
                                                type: "post",
                                                url: "getCityList",
                                                data: {"rule_province": $(this).val()},
                                                dataType: "json",
                                                success: function(data) {
                                                    //遍历json数据，组装下拉选框添加到html中
                                                    $("#citys").html("<option value=''>请选择市</option>");
                                                    $.each(data, function(i, item) {
                                                        $("#citys").append("<option value='" + item.city_name + "'>" + item.city_name + "</option>");
                                                    });
                                                }
                                            });
                                            layer.load(3, {time: 1*1000});
                                            layer.close();
                                        });
                                    </script>
                                    <script>
                                        $("#citys").change(function() {
                                            $.ajax({
                                                type: "post",
                                                url: "getQuList",
                                                data: {"rule_city": $(this).val()},
                                                dataType: "json",
                                                success: function(data) {
                                                    //遍历json数据，组装下拉选框添加到html中
                                                    $("#qus").html("<option value=''>请选择区</option>");
                                                    $.each(data, function(i, item) {
                                                        $("#qus").append("<option value='" + item.city_name + "'>" + item.city_name + "</option>");
                                                    });
                                                }
                                            });
                                            layer.load(3, {time: 1*1000});
                                            layer.close();
                                        });
                                    </script>

                                    <div class="form-group">
                                        <label for="push_circle" class="col-sm-2 control-label">推广圈层</label>
                                        <div class="col-sm-10 col-md-4">
                                            <select name="push_circle" id="push_circle" class="form-control field-select"
                                                    data-placeholder="请选择推广圈层">
                                                <option value="0">全部</option>
                                                {foreach $circle_list as $key=>$value}
                                                <option value="{$value['id']}">{$value['circle_name']}</option>
                                                {/foreach}
                                            </select>
                                        </div>
                                    </div>




                                    <input name="id_str" id="id_str" type="hidden" value="{$id_str}">


                                    <div class="form-group">
                                        <label for="tijiao" class="col-sm-2 control-label"></label>
                                        <div class="col-sm-10 col-md-4">
                                            <a class="btn btn-success btn-sm ktAjaxButton" data-toggle="tooltip" title=""
                                               data-confirm-title="是否确认" data-confirm-content="确认为选中视频推广？"
                                               data-id="checked"
                                               data-url="{:url('actionpttg')}">
                                                确认
                                            </a>
                                        </div>
                                    </div>



                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        //弹框内确认  禁用回车键
        $(document).on('keydown keypress', function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
            }
        });


        $('body').on('click', '.ktAjaxButton', function (event) {
            console.log("ktAjax")
            event.preventDefault();

            if (adminDebug) {
                console.log('AjaxButton clicked.');
            }
            //是否弹出提示
            let layerConfirm = $(this).data("confirm") || 1;
            //访问方式，1为直接访问，2为layer窗口显示
            let layerType = parseInt($(this).data("type") || 1);
            //访问的url
            let url = $(this).data("url");
            //访问方式，默认post
            let layerMethod = $(this).data("method") || 'post';
            //访问成功后跳转的页面，不设置此参数默认根据后台返回的url跳转
            let go = $(this).data("go") || 'url://reload';
            // let go = 'url://close-refresh';

            //当为窗口显示时可定义宽度和高度
            let layerWith = $(this).data("width") || '80%';
            let layerHeight = $(this).data("height") || '60%';

            //窗口的标题
            let layerTitle = $(this).data('title');

            //当前操作数据的ID
            let dataId = $(this).data("id");

            let dataData;

            if ($("#id_str").val() == '') {
                layer.msg('请选择要推广的短视频', {icon: 2, scrollbar: false,});
                return false;
            }
            if ($("#push_exposure_num").val() <= 0) {
                layer.msg('曝光次数填写错误', {icon: 2, scrollbar: false,});
                return false;
            }
            if ($("#push_start_time").val() == '') {
                layer.msg('请选择推广开始时间', {icon: 2, scrollbar: false,});
                return false;
            }
            if ($("#push_end_time").val() == '') {
                layer.msg('请选择推广结束时间', {icon: 2, scrollbar: false,});
                return false;
            }

            //如果没有定义ID去查询data-data属性
            if (dataId === undefined) {
                dataData = $(this).data("data") || {};
            } else {
                dataData = {
                    "id_str": $("#id_str").val(),
                    "push_exposure_num": $("#push_exposure_num").val(),
                    "push_start_time": $("#push_start_time").val(),
                    "push_end_time": $("#push_end_time").val(),
                    "push_sex": $("#push_sex").val(),
                    "push_minage": $("#push_minage").val(),
                    "push_maxage": $("#push_maxage").val(),
                    "provinces": $("#provinces").val(),
                    "citys": $("#citys").val(),
                    "qus": $("#qus").val(),
                    "push_circle": $("#push_circle").val(),
                };
            }

            if (typeof (dataData) != 'object') {
                dataData = JSON.parse(dataData);
            }

            /*需要确认操作*/
            if (parseInt(layerConfirm) === 1) {
                //提示窗口的标题
                let confirmTitle = $(this).data("confirmTitle") || '操作确认';
                //提示窗口的内容
                let confirmContent = $(this).data("confirmContent") || '您确定要执行此操作吗?';
                layer.confirm(confirmContent, {title: confirmTitle, closeBtn: 1, icon: 3}, function () {
                    //如果为直接访问
                    if (layerType === 1) {
                        ajaxRequests(url, layerMethod, dataData, go);
                    } else if (layerType === 2) {
                        //如果为打开窗口
                        //先进行权限查询
                        if (checkAuth(url)) {
                            layer.open({
                                type: 1,
                                area: [layerWith, layerHeight],
                                title: layerTitle,
                                closeBtn: 1,
                                shift: 0,
                                content: url + "?request_type=layer_open&" + parseParam(dataData),
                                scrollbar: false,
                            });
                        }
                    }
                });
            } else {
                //不需要操作确认
                if (layerType === 1) {
                    //直接请求
                    ajaxRequests(url, layerMethod, dataData, go);
                } else if (layerType === 2) {
                    //弹出窗口
                    //检查权限
                    if (checkAuth(url)) {
                        //用窗口打开
                        layer.open({
                            type: 2,
                            area: [layerWith, layerHeight],
                            title: layerTitle,
                            closeBtn: 1,
                            shift: 0,
                            content: url + "?request_type=layer_open&" + parseParam(dataData),
                            scrollbar: false,
                        });
                    }
                }
            }
        });

        function ajaxRequests(url, method, data, go) {
            let loadT = layer.msg('正在请求,请稍候…', {icon: 16, time: 0, shade: [0.3, '#000'], scrollbar: false,});
            $.ajax({
                    url: url,
                    dataType: 'json',
                    type: method,
                    data: data,
                    success: function (result) {
                        // debugger
                        layer.close(loadT);
                        layer.msg(result.msg, {
                            icon: result.code ? 1 : 2,
                            scrollbar: false,
                        });

                        if (adminDebug) {
                            console.log('request success!');
                            if (result.code === 1) {
                                console.log('%cresult success', ';color:#00a65a');
                                go = 'url://close-refresh';
                            } else {
                                console.log('%cresult fail', ';color:#f39c12');
                                go = 'url://reload';
                            }
                            setTimeout(function () {
                                goUrl(go);
                            }, 2000);
                        }
                        // setTimeout("alert('123')", 3000 )

                    },
                    error: function (xhr, type, errorThrown) {
                        console.log("error")
                        //异常处理；
                        if (adminDebug) {
                            console.log('%crequest fail!', ';color:#dd4b39');
                            console.log();
                            console.log("type:" + type + ",readyState:" + xhr.readyState + ",status:" + xhr.status);
                            console.log("url:" + url);
                            console.log("data:");
                            console.log(data);
                            layer.close(loadT);
                        }
                        layer.msg('访问错误,代码' + xhr.status, {icon: 2, scrollbar: false,});
                    }
                }
            );
        }
    </script>
    <script>
        //引入jquery
        $(function() {
            //页面初始，加载所有的省份
            $.ajax({
                type: "post",
                url: "getProvinceList",
                data: {},
                dataType: "json",
                success: function(data) {
                    //遍历json数据，组装下拉选框添加到html中
                    $("#provinces").html("<option value=''>请选择省</option>");
                    $.each(data, function(i, item) {
                        $("#provinces").append("<option value='" + item.province_name + "'>" + item.province_name + "</option>");
                    });
                }
            });
        });

    </script>
    {/block}